<template>
  <div id="timelocation" @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow">
          <span>
            <i class="iconfont icon-shijiandidianiconfontshiyongzhinan"></i>&nbsp;{{moddata.config.title}}</span>
        </div>
        <div class="text">
          <div id="mapBox"></div>
          <div class="textBox">
            <p>时间：{{taskdata.StartTime}} ~ {{taskdata.EndTime}}</p>
            <p>地点：{{taskdata.FullAddress}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'element-ui'
  export default {
    props: ["moddata", "index", "taskdata"],
    data: function () {
      return {
        maskshow: false
      }
    },
    watch:{
      taskdata(a){
        this.renderMap(a);
      }
    },
    methods: {
      renderMap(taskdata) {
        var point;
        var map = new BMap.Map("mapBox"); // 创建地图实例 
        var x, y;
        var tmpArray = taskdata.Coordinate.split(",");
        x = parseFloat(tmpArray[0]);
        y = parseFloat(tmpArray[1]);
        if (taskdata.Coordinate != ",") {
          point = new BMap.Point(x, y);
          var marker = new BMap.Marker(point); // 创建标注    
          map.centerAndZoom(point, 15)
          map.addOverlay(marker); // 将标注添加到地图中
        } else if (taskdata.FullAddress) {
          var myGeo = new BMap.Geocoder();
          myGeo.getPoint(taskdata.FullAddress, function (po) {
            //判断键入的地址是否存在
            if (po) {
              point = po;
            } else {
              point = p;
            }
            var marker = new BMap.Marker(point); // 创建标注    
            map.centerAndZoom(point, 15)
            map.addOverlay(marker); // 将标注添加到地图中
          });
        } else {
          point = p;
          var marker = new BMap.Marker(point); // 创建标注    
          map.centerAndZoom(point, 15)
          map.addOverlay(marker); // 将标注添加到地图中
        }
      },
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'SetShowMod',
          index: this.index
        })
      },
      deletemod: function () {
        this.$store.dispatch('deleteMod', this.index)
      }
    }
  }
</script>

<style lang="less" scoped>
  .default {
    #mapBox {
      height: 500px;
    }
    .mod {
      padding: 0;
      .con {
        max-width: none;
        width: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        .text {
          margin-top: 0;
        }
      }
    }
    .textBox {
      height: 50px;
      width: 100%;
      background: rgba(0, 0, 0, .7);
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 10px;
      p {
        text-align: center;
        color: #fff;
        line-height: 25px;
      }
    }
  }

  .tradition {

    .mod {
      padding: 0px;
      .con {
        max-width: none;
        width: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        .text {
          padding: 20px;
          #mapBox {
            height: 300px;
            margin-bottom: 10px;
          }
        }
        .textBox {
          height: 50px;
          width: 100%;
          p {
            text-align: left;
            color: #000;
            line-height: 25px;
          }
        }
      }
    }
  }
</style>